<template>
	<view class="" :style="[AppSkinVar]">
		<view class="nearby-header e-flex bg-white">
			<view class="e-flex e-m-r-30" @tap="$goTo('/pages/nearby/city')">
				<image src="/static/nearby/address.png" class="img-40 e-m-r-20"></image>
				<text>{{ addressText }}</text>
				<image src="/static/nearby/arrow_down.png" class="img-20 e-m-l-20"></image>
			</view>
			<view class="e-flex-1 nearby-header__search  e-font-26 e-p-l-20 e-flex e-flex-between">
				<view class="e-flex">
					<e-input :placeholder="$t('classify.请输入地址搜索')" @change="change"></e-input>
				</view>
			</view>
		</view>

		<view class="e-p-20">
			<view class="e-rela point-list bg-white e-m-b-20" v-for="item in list" :key="item.id"
				@tap="handleSelect(item)">
				<view v-if="addressId == item.id" class="e-abso e-font-20 select-box" :style="[activitytitle]">
					{{$t('cart.当前选择')}}
				</view>
				<view class="e-flex e-m-b-20">
					<view class="e-flex-1 c-333 e-font-30 fw-600">
						{{item.name}}
					</view>
					<view class="e-font-26 c-666">
						{{getDistance(item.distance)}}
					</view>
				</view>
				<view class="e-flex e-m-b-10">
					<image class="img-22 e-m-r-10" :src="$staticPath('grey-clock.png')" mode=""></image>
					<view class="e-font-24 c-666">
						{{item.businessHours}}
					</view>
				</view>
				<view class="e-flex e-m-b-10">
					<image class="img-22 e-m-r-10" :src="$staticPath('grey-position.png')" mode=""></image>
					<view class="e-font-24 c-666 e-flex-1 e-line-1 e-m-r-20">
						{{item.detailedAddress}}
					</view>
					<view class="e-font-24" :style="{color:AppSkin.primary}" @tap.stop="openLocation(item)">
						{{$t('cart.导航前往')}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import { ref, computed } from 'vue'
	import {
		debounce
	} from '@/common/utils'
	import {
		getDeliveryPlaceList
	} from '@/common/request/api'
	import type { DeliveryPlace } from '@/common/request/api'
	import { useCurrentInstance,useLocation, useNavigation } from '@/common/hooks'
	import { useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	import {
		onShow
	} from '@dcloudio/uni-app'

	const props = defineProps({
		storeId: String,
		id: String
	})
	
	const ctx = useCurrentInstance()
	
	const { AppSkin } = storeToRefs(useInit())
	const activitytitle = computed(() => {
		return {
			background: AppSkin.value.primary.replace('1)', '0.1)'),
			color: AppSkin.value.primary
		}
	})
	const {
		latitude,
		longitude,
		addressText,
		getUserLocation
	} = useLocation()
	const { openNavigation } = useNavigation()


	const addressId = ref(props.id || '')


	const list = ref<DeliveryPlace[]>([])

	const getData = (key ?: string) => {
		getDeliveryPlaceList({
			storeId: props.storeId,
			location: longitude.value ? `${longitude.value},${latitude.value}` : "",
			key
		}).then(res => {
			list.value = res.data
		})
	}

	const getLocation = (isRefresh ?: boolean) => {
		getUserLocation(isRefresh).finally(() => {
			getData()
		})
	}

	const getDistance = (num : number) => {
		return num > 1000 ? `${(num / 1000).toFixed(1)}km` : `${num}m`
	}


	const change = debounce(function (key) {
		getData(key)
	}, 500)
	
	const handleSelect = (item : DeliveryPlace) => {
		addressId.value = item.id
		uni.setStorageSync('storeAddressInfo', item)
		const eventChannel = ctx.getOpenerEventChannel();
		eventChannel.emit('updateSelfPickAddr', item)
		ctx.$back();
	}
	const openLocation = (item : DeliveryPlace) => {
		const location = item.location?.split(',')
		if (location) {
			openNavigation({
				location: location,
				title: item.name,
				address: item.detailedAddress
			})
		}

	}


	if (props.storeId) {
		getLocation()
	}

	onShow(() => {
		getLocation()
	})
</script>
<style lang="scss" scoped>
	.nearby-header {
		padding: 30rpx 20rpx;

		&__search {
			border-radius: 30rpx;
		}
	}

	.point-list {
		border-radius: 20rpx;
		padding: 32rpx 20rpx 26rpx 20rpx;
	}

	.img-100 {
		width: 100rpx;
		height: 100rpx;
	}

	.c-grey {
		color: #989898;
	}

	.label-box {
		padding: 4rpx 10rpx;
		border: 1rpx solid;
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
	}

	.select-box {
		padding: 2rpx 10rpx;
		border-radius: 0px 20rpx 0px 10rpx;
		top: 0;
		right: 0;
	}
</style>